<template>
  <div>
    <HmBiao :list="ae" @au="au" @add="add">
      <template #top>
        <th>就诊日期</th>
        <th>医生姓名</th>
        <th>诊断结果</th>
        <th>处方信息</th>
        <th>操作</th>
      </template>
    </HmBiao>
    <DiAo v-if="flag" :lis="lis"  @abb="abb"></DiAo>
  </div>
</template>

<script>
import DiAo from "./components/hm-diao.vue";
import HmBiao from "./components/hm-biao.vue";
export default {
  components: {
    HmBiao,
    DiAo,
  },
  data() {
    return {
      b: "",
      flag: false,
      lis:{},
      list: [
        {
          id: 1,
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          id: 2,
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          id: 3,
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
    };
  },
  methods: {
    au(e) {
      this.b = e;
    },
    add(id){
     this.lis=this.list.find((item)=>item.id===id)
      this.flag = true;
    },
    abb(){
      this.flag=false
    }
  },
  computed: {
    ae() {
      if (this.b === "") {
        return this.list;
      } else {
        return this.list.filter((item) => item.doctor === this.b);
      }
    },
  },
};
</script>
